<template>
	<view :class="[`${PREFIX}-comment`]">
		<view :class="[`${PREFIX}-comment-block`]"></view>
		<view :class="[`${PREFIX}-comment-title`]">全部评论(2)</view>
		<view :class="[`${PREFIX}-comment-list`]">
			<view :class="[`${PREFIX}-comment-list-item`]">
				<image :class="[`${PREFIX}-comment-list-item-avatar`]" src="" mode=""></image>
				<view :class="[`${PREFIX}-comment-list-item-lines`]">
					<view :class="[`${PREFIX}-comment-list-item-lines-line1`]">
						<view :class="[`${PREFIX}-comment-list-item-lines-line1-left`]">
							子墨
							<view>作者</view>
						</view>
						<image :class="[`${PREFIX}-comment-list-item-lines-line1-right`]" src="" mode=""></image>
					</view>
					<view :class="[`${PREFIX}-comment-list-item-lines-line2`]">
						诸事顺利诸事顺利诸诸事顺利诸事顺利诸诸事顺利诸事顺利诸诸事顺利诸事顺利诸诸事顺利诸事顺利诸诸事顺利诸事顺利诸
					</view>
					<view :class="[`${PREFIX}-comment-list-item-lines-line3`]">
						5小时前<view>回复</view>
					</view>
					<view :class="[`${PREFIX}-comment-list-item-child`]">
						<image :class="[`${PREFIX}-comment-list-item-child-avatar`]" src="" mode=""></image>
						<view :class="[`${PREFIX}-comment-list-item-lines`]">
							<view :class="[`${PREFIX}-comment-list-item-lines-line1`]">
								<view :class="[`${PREFIX}-comment-list-item-lines-line1-left`]">
									子墨
								</view>
								<image :class="[`${PREFIX}-comment-list-item-lines-line1-right`]" src="" mode="">
								</image>
							</view>
							<view :class="[`${PREFIX}-comment-list-item-lines-line2`]">
								诸事顺利诸事顺利诸诸事顺利诸事顺利诸诸事顺利诸事顺利诸诸事顺利诸事顺利诸诸事顺利诸事顺利诸诸事顺利诸事顺利诸
							</view>
							<view :class="[`${PREFIX}-comment-list-item-lines-line3`]">
								5小时前<view>回复</view>
							</view>
						</view>
					</view>
				</view>

			</view>
		</view>
	</view>
</template>

<script>
	const PREFIX = 'home-comment'
	export default {
		data() {
			return {
				PREFIX
			}
		},
		methods: {
			
		}
	}
</script>

<style lang="less">
	.home-comment {

		&-comment {
			box-sizing: border-box;
			padding-bottom: 25px;
			// padding: 0 25px 0 20px;

			&-block {
				// width: 375px;
				height: 5px;
				// opacity: 1;
				background: #f4f2f2;

			}

			&-title {
				// width: 97px;
				height: 17px;
				// opacity: 1;
				color: #333333;
				text-align: left;
				font-size: 18px;
				// font-weight: 0;
				// font-family: "PingFangSC-Medium";
				line-height: 17px;
				letter-spacing: 0.3px;
				padding: 15px 0 17px 20px;
			}

			&-list {
				&-item {
					display: flex;
					// justify-content: space-between;
					padding: 0 25px 0 20px;

					&-avatar {
						width: 40px;
						height: 40px;
						background: blue;
						border-radius: 50%;
						margin-right: 16px;
						flex-shrink: 0;
					}


					// &-left {
					display: flex;

					&-lines {
						width: 100%;
						// flex: 1;
						display: flex;
						flex-direction: column;
						// flex-shrink: 1;
						// padding-right: 25px;
						// box-sizing: border-box;

						&-line1 {
							display: flex;
							justify-content: space-between;
							align-items: center;
							height: 17px;
							// opacity: 1;
							color: #666666;
							// text-align: left;
							font-size: 16px;
							// font-weight: 0;
							// font-family: "PingFangSC-Medium";
							line-height: 17px;

							&-left {
								display: flex;

								view {
									width: 46px;
									height: 20px;
									display: flex;
									justify-content: center;
									align-items: center;
									border-radius: 10px;

									background: #7355ff;
									color: #fff;
									font-size: 12px;
									margin-left: 18px;
								}
							}

							&-right {
								width: 20px;
								height: 20px;
								background: blue;
								// flex-shrink: 0;
							}

							// view {
							// 	width: 46px;
							// 	height: 20px;
							// 	display: flex;
							// 	justify-content: center;
							// 	align-items: center;
							// 	border-radius: 10px;

							// 	background: #7355ff;
							// 	color: #fff;
							// 	font-size: 12px;
							// 	margin-left: 18px;

							// }

						}

						&-line2 {
							// width: 73.5px;
							// height: 17px;
							opacity: 1;
							color: #333333;
							// text-align: left;
							font-size: 18px;
							// font-weight: 0;
							// font-family: "PingFangSC-Medium";
							line-height: 20px;
							margin: 12px 0;
							// letter-spacing: 0.3px;

						}

						&-line3 {
							display: flex;

							// width: 59px;
							height: 17px;
							// opacity: 1;
							color: #999999;
							// text-align: left;
							font-size: 16px;
							// font-weight: 0;
							// font-family: "PingFangSC-Medium";
							line-height: 20px;

							// letter-spacing: 0.27px;
							view {
								margin-left: 23px;
							}

						}
					}

					&-child {
						display: flex;
						margin-top: 32px;

						&-avatar {
							width: 24px;
							height: 24px;
							background: blue;
						}
					}

					// }


				}
			}
		}

	}
</style>